<template>
  <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc; display: flex">
    <!--    左上标题-->
    <div style="width: 200px;padding-left: 20px;font-weight: bold;color: dodgerblue">家庭财务管理系统</div>
    <!--   中间主题-->
    <div style="flex: 1"></div>
    <!--全屏显示-->
    <div>
      <img
          src="../assets/icon/HomePage.png"
          alt="回主页面"
          style="width: 25px;height: 25px;margin-right: 20px;margin-top: 12px"
          @click="mainRouting()"
      />
      <img
          src="../assets/icon/fullScreen.png"
          alt="全屏显示"
          style="width: 25px;height: 25px;margin-right: 20px;margin-top: 12px"
          @click="screenFull()"/>
    </div>
    <!--头像-->
    <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
    <!--    右边下拉框-->
    <div style="width: 100px">
      <el-dropdown>
    <span class="el-dropdown-link">
      <!--从cookie里取出当前登录用户-->
          <strong>{{ showUserName }}</strong>
      <el-icon class="el-icon--right">
        <ArrowDown/>
      </el-icon>
    </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="$router.push('/person')">个人信息</el-dropdown-item>
            <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

  </div>
</template>

<script>
import {ArrowDown} from '@element-plus/icons-vue'
import Cookie from "cookie_js";
import router from "../router";
import {screenfull} from "vue-fullscreen";

export default {
  name: "Header",
  props: ['user'],
  components: {
    ArrowDown
  },
  data() {
    return {
      isFullscreen: false,
      squareUrl:
          'https://img2.baidu.com/it/u=1048725472,3888888713&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    }
  },
  computed: {
    /*获取当前登录用户*/
    showUserName() {                   //去除cookie取值带”“号的问题
      return Cookie.get("name").replace(/\"/g, "");
    }
  },
  methods: {
    /*退出登录*/
    loginOut() {
      //删除cookie中的信息
      Cookie.remove("name", "user", "userId")
      //跳转登录状态
      router.replace("/")
    },
    //全屏显示
    screenFull() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: '你的浏览器不工作!',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
      this.isFullscreen = true
    },
    //跳转到主页面
    mainRouting() {
      this.$router.replace("/Main")
    }
  }
}
</script>

<style>
</style>